﻿<div>
    <h1>Grid Editor</h1>
    <div class='well'>
        <form data-bind='submit: save'>
            <p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s).</p>
            <table data-bind='visible: gifts().length > 0'>
                <thead>
                    <tr>
                        <th>Gift Name</th>
                        <th>Price</th>
                        <th />
                    </tr>
                </thead>
                <tbody data-bind='foreach: gifts'>
                    <tr>
                        <td><input class='form-control' data-bind='value: name' /></td>
                        <td><input class='form-control' data-bind='value: price' /></td>
                        <td>
                            <button class="btn btn-danger" data-bind='click: $root.removeGift'>
                                <span class="fa fa-trash-o"></span>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br/>
            <button class="btn btn-default" data-bind='click: addGift'>Add Gift</button>
            <button class="btn btn-success" data-bind='enable: gifts().length > 0' type="submit">Submit</button>
        </form>
    </div>
</div>